<script setup lang="ts">
//404页面
import Combine from "@/components/home/right/combine.vue";
import Img from "@/components/block/img.vue";
import Icon404 from "@/assets/icon-404.png";
import { dataLocal } from "@/store/store";
//拿到网址
const site = dataLocal.site.home;
const goHome = () => {
  window.location.href = site;
};

const dataSum = {
  content: {
    ID: 0, //内容唯一ID
    url: "string", //唯一链接
    post_author: "string", //作者
    post_content: "", //内容
    post_date: "0", //时间
    post_excerpt: "", //描述
    post_password: "", //密码
    post_status: "string",
    post_title: "404 Not Found", //标题
    post_type: "string", //类型
  },
  meat: {
    site: "",
    switch: "false",
  },
};
</script>
<template>
  <Combine :data="dataSum">
    <div class="section-404 rounded-xl">
      <div class="container">
        <div class="img-box">
          <Img :img="Icon404" />
        </div>
        <h2 class="title">抱歉，页面载入失败</h2>
        <div class="prompt">请检查您的输入是否有误</div>

        <button class="back-btn" @click="goHome">返回首页</button>
      </div>
    </div>
  </Combine>
</template>
<style scoped lang="less">
.section-404 {
  //background: url("@/assets/error-bg.png") repeat;
  padding: 1px 0 1px;
  .container {
    //max-width: 380px;
    //height: 340px;
    text-align: center;
    margin: 0px auto 80px;
    .img-box {
      display: inline-block;
      width: 205px;
      height: 205px;
      //background: url("@/assets/icon-404.png") 50%;
    }
    .title {
      font-size: 24px;
      font-weight: 700;
      color: #333;
      margin: 28px 0 20px;
    }
    .prompt {
      font-size: 14px;
      color: #999;
      margin-bottom: 20px;
    }
    .back-btn {
      padding: 6px 10px;
      border: 1px solid #d0d0d0;
      border-radius: 6px;
      font-weight: 700;
      font-size: 14px;
      color: #666;
      margin: 0 auto;
      cursor: pointer;
      -webkit-transition: all 0.15s ease-out;
      transition: all 0.15s ease-out;
      background-color: transparent;
    }
  }
}
</style>
